<template>
    <div class="page prefer">
        <div class="hd">
            <h1 class="page_title">我的偏好 {{length}}/{{maxLength}}</h1>
            <p class="page_desc">勾选感兴趣的偏好，我们会根据你的选择优先推荐游戏哦~！</p>
        </div>
        <div class="sel-box box">
            <Grid :items="selectedGames" :click-handler="removeItem"></Grid>
        </div>
        <div class="box">
            <Grid :items="unSelectedGames" :click-handler="addItem"></Grid>
        </div>
        <msg :data="errorData"></msg>
    </div>
</template>

<script type="text/ecmascript-6">
    import Grid from '../weui/Grid.vue'
    import server from '../lib/server'
    import {setSession,getSession} from '../lib/session'
    import Msg from '../components/Msg.vue'
    var find=function(arr,callback){
        var res=undefined;
        for(let i in arr){
            if(callback(arr[i],i)){
                res=arr[i];
                break;
            }
        }
        return res;
    };
    export default {
      components:{
        Grid,Msg
      },
      data () {
          var session=getSession();
          var attr=session.attr?session.attr.split(''):[];
        var game_icon=[];
        for(let key in window.game_icon_map){
            game_icon.push({
                id:window.game_icon_map[key].id,
                img:window.game_icon_map[key].icon,
                text:window.game_icon_map[key].name,
                select:find(attr,(n)=>n==key)===undefined?false:true
            });
        }
        return {
            serverData:session,
            maxLength:6,
            games:game_icon,
            errorData:{}
        }
      },
      computed:{
        selectedGames(){
            return this.games.filter((n)=>n.select);
        },
        unSelectedGames(){
            return this.games.filter((n)=>!n.select);
        },
        length(){
            return this.selectedGames.length;
        }
      },
      methods:{
        addItem(item,index){
            if(this.length>=this.maxLength){
                return;
            }
            item.select=true;
            var attr=this.serverData.attr=this.selectedGames.map((n)=>n.id).join('');
            server('/P/U/DoNMas_WX',{
                session_id:this.serverData.session_id,
                attrs:attr
            }).success((response)=>{
                if(response.code==1){
                    this.serverData.attr=attr;
                    setSession(this.serverData);
                }else{
                    if(response.code==19){
                        this.errorData={
                            show:true,
                            type:'login'
                        };
                    }else{
                        this.errorData={
                            show:true,
                            type:'error',
                            msg:response.msg
                        };
                    }
                }
            });

        },
        removeItem(item,index){
            item.select=false;
            var attr=this.serverData.attr=this.selectedGames.map((n)=>n.id).join('');
            server('/P/U/DoNMas_WX',{
                session_id:this.serverData.session_id,
                attrs:attr
            }).success((response)=>{
                if(response.code==1){
                    this.serverData.attr=attr;
                    setSession(this.serverData);
                }else{
                    if(response.code==19){
                        this.errorData={
                            show:true,
                            type:'login'
                        };
                    }else{
                        this.errorData={
                            show:true,
                            type:'error',
                            msg:response.msg
                        };
                    }
                }
            });
        }
      },
      created () {

      },

      destroyed () {}
    }
</script>

<style lang="less">
    .prefer{
        .page_title {
            text-align: center;
            font-size: 18rem/16;
            color: #666;
            font-weight: 400;
            margin: 0 15%;
        }
        .hd {
            padding: 1em 0;
            text-align: center;
            .page_desc {
                color: #888;
                padding: 0.2em 0;
                font-size: 12rem/16;
            }
        }
        .box{
            width:95%;
            margin:0 auto;
            padding:5rem/16;
            .weui_grids{
                .weui_grid_label{
                    font-size:10rem/16;
                    height: 17rem/16;
                    overflow: hidden;
                }
                &:before{
                     border-top:none;
                 }
                &:after{
                     border-left: none;
                 }
            }

            .weui_grid{
                width:100% / 6;
                padding: 5rem/16 0;
                &:before{
                     border-top:none;
                     border-right:none;
                 }
                 &:after{
                      border-bottom: none;
                  }
                .weui_grid_icon{
                    width:30rem/16;
                    height:30rem/16;
                }
            }
        }

        .sel-box{
            border-bottom: 1px solid #D9D9D9;
            min-height: 74rem/16;
        }
    }
</style>
